<template>
  <div>
    <!-- 框 -->
    <textarea
      class="comment-textarea"
      v-model="commentContent"
      placeholder="写下点什么..."
      maxlength="1000"/>
    <!-- 按钮 -->
    <div class="myBetween" style="margin-bottom: 10px">
      <div style="display: flex">
        <div :class="{'emoji-active':showEmoji}"
             @click="showEmoji = !showEmoji">
          <i class="el-icon-orange myEmoji"></i>
        </div>
        <div @click="openPicture()">
          <i class="el-icon-picture myPicture"></i>
        </div>
      </div>

      <div style="display: flex">
        <!--        <proButton :info="'涂鸦'"-->
        <!--                   v-show="!$common.mobile() && !disableGraffiti"-->
        <!--                   @click.native="showGraffiti()"-->
        <!--                   :before="$constant.before_color_1"-->
        <!--                   :after="$constant.after_color_1"-->
        <!--                   style="margin-right: 6px">-->
        <!--        </proButton>-->
        <proButton :info="'提交'"
                   @click.native="submitComment()"
                   :before="$constant.before_color_2"
                   :after="$constant.after_color_2">
        </proButton>
      </div>
    </div>
    <!-- 表情 -->
    <emoji @addEmoji="addEmoji" :showEmoji="showEmoji"></emoji>

    <el-dialog title="图片"
               :visible.sync="showPicture"
               width="25%"
               :append-to-body="true"
               destroy-on-close
               center>
      <div>
<!--        <uploadPicture :prefix="'commentPicture'" @addPicture="addPicture" :maxSize="5"-->
<!--                       :maxNumber="1"></uploadPicture>-->
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import emoji from "@/views/weblogFront/common/emoji.vue";
import proButton from "@/views/weblogFront/common/proButton.vue";
import $constant from "@/utils/constant"
import {ref} from "vue";
import {isEmpty} from "@/utils/common";
import {getToken} from "@/utils/auth";
import {ElMessage} from "element-plus";

const emits = defineEmits(['submitComment', 'showGraffiti'])
const props = defineProps({
  disableGraffiti: {
    type: Boolean,
    default: false
  }
});

const commentContent = ref("");
const showEmoji = ref(false);
const showPicture = ref(false);
const picture = ref({
  name: "name",
  url: ""
});

function openPicture() {
  if (isEmpty(getToken())) {
    ElMessage({
      message: "请先登录！",
      type: "error"
    });
    return;
  }
  showPicture.value = true;
}

function addPicture(res) {
  picture.value.url = res;
  savePicture();
}

function savePicture() {
  let img = "<" + this.picture.name + "," + this.picture.url + ">";
  commentContent.value += img;
  picture.value.url = "";
  showPicture.value = false;
}

function addEmoji(key) {
  commentContent.value += key;
}

function showGraffiti() {
  if (isEmpty(getToken())) {
    ElMessage({
      message: "请先登录！",
      type: "error"
    });
    return;
  }

  commentContent.value = "";
  emits("showGraffiti");
}

function submitComment() {
  // if (isEmpty(getToken())) {
  //   ElMessage({
  //     message: "请先登录！",
  //     type: "error"
  //   });
  //   return;
  // }

  if (commentContent.value.trim() === "") {
    ElMessage({
      message: "你还没写呢~",
      type: "warning"
    });
    return;
  }
  emits("submitComment", commentContent.value.trim());
  this.commentContent = "";
}
</script>

<style scoped>
.comment-textarea {
  border: 1px solid var(--lightGray);
  width: 100%;
  font-size: 14px;
  padding: 15px;
  min-height: 180px;
  /* 不改变大小 */
  resize: none;
  /* 不改变边框 */
  outline: none;
  border-radius: 4px;
  background-image: var(--commentURL);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 100%;
  margin-bottom: 10px;
}

.comment-textarea:focus {
  border-color: var(--themeBackground);
}

.myEmoji {
  font-size: 18px;
  cursor: pointer;
  transition: all 0.5s;
  margin-right: 12px;
}

.myEmoji:hover {
  transform: rotate(360deg);
  font-size: 22px;
}

.myPicture {
  font-size: 18px;
  cursor: pointer;
}

.emoji-active {
  color: var(--red);
}
</style>
